<script type="text/javascript">
	var divide = ""
	$(function(){
		$("delet").click(function(){
			alert("1");
		});
		//添加
		$("#adduser_btn").click(function(){
			$(".adduser").css("display","block");
			$("#all").css("display","block");
		});
		
		$("#userFrom").submit(function(){
			$.post("addUser",$(this).serialize(),function(data){
				if(data.flag){
					alert("添加成功");
				}else{
					alert("添加失败");
				}
			});
		});
		
		//初始化页面
		load();
		//分组展示信息
		$(".user-btn").click(function(){
			divide = this.value;
			ufenzu(divide);
		});
		
		//搜索用户
		$("#sect_btn").click(function(){
			var name = $("#sect_name").val();
			$.post('findUname',{name:name},function(data){
				var userList = "";
					for(var i = 0;i<data.length;i++){
						var user = '<tr>'+
					      '<td>'+data[i].name+'</td>'+
					      '<td>'+data[i].username+'</td>'+
					      '<td>'+data[i].password+'</td>'+
					      '<td>'+data[i].idcard+'</td>'+
					      '<td>'+data[i].divide+'</td>'+
						  '<td><a href="javascript:udelet('+data[i].username+')"><button type="button" class="btn btn-warning btn-xs">删除</button></a></td>'+
					    '</tr> ';
					userList += user;
				}
				$("#userList").html(userList);
				$(".fenye").css("display","none");
				
			});
		});
		
	});
	//删除用户
	function udelet(username){
		$.post('deletUser',{username:username},function(data){
			load();
		});
	}
	
	//分组页面
	function ufenzu(fenzu,ym){
		var fh = "'";
		$.post('findUser',{divide:fenzu,currentPage:ym},function(data){
			//页码
			var ym = "";
			//计算上一页的页码
			var beforNum = data.currentPage-1;
			if(beforNum<=0){
				beforNum=1;
			}
			var ym1 ='<li>'+
		      '<a href="javascript:ufenzu('+fh+divide+fh+','+beforNum+')" aria-label="Previous">'+
		        '<span aria-hidden="true">&laquo;</span>'+
		      '</a>'+
		    '</li>' ;
		    ym+=ym1;
		  //开始位置和结束位置
		    var begin;
		    var end;
		    //显示10个页码
		    if(data.allPages<10){
		    	//总页码小于10页
		    	begin = 1;
		    	end = data.allPages;
		    }else{
		    	//总页码大于10页
		    	begin = data.allPages - 5;
		    	end = data.allPages + 4;
		    	
		    	//2.如果前面不够5个  补齐
		    	if(begin<1){
		    		begin = 1;
		    		end = begin +9;
		    	}
		    	if(end>data.allPages){
		    		end = data.allPages;
		    		begin=end-9
		    	}
		    }
		    for(var i = begin;i<=end;i++){
		    	var d = fh+divide+fh;
		    	var ym2 = '<li><a href="javascript:ufenzu('+fh+divide+fh+','+i+')">'+i+'</a></li>';
		    	ym+=ym2;
		    }
		    //计算下一页
		    var lastNum = data.currentPage+1;
			if(lastNum>data.allPages){
				lastNum=data.allPages;
			}
			var ym3 ='<li>'+
			      	 '<a href="javascript:ufenzu('+fh+divide+fh+','+lastNum+')" aria-label="Next">'+
	        		 '<span aria-hidden="true">&raquo;</span>'+
	      			 '</a>'+
	    			 '</li>';
	    			 ym+=ym3;
			$(".pagination").html(ym);
			
			
			//用户列表
			var userList = "";
			for(var i=0;i<data.list.length;i++){
				var user = '<tr>'+
				      '<td>'+data.list[i].name+'</td>'+
				      '<td>'+data.list[i].username+'</td>'+
				      '<td>'+data.list[i].password+'</td>'+
				      '<td>'+data.list[i].idcard+'</td>'+
				      '<td>'+data.list[i].divide+'</td>'+
					  '<td><a href="javascript:udelet('+data.list[i].username+')"><button type="button" class="btn btn-warning btn-xs">删除</button></a></td>'+
				    '</tr> ';
				userList += user;
			}
			$("#userList").html(userList);
			
		});
	}
	//初始化user页面
	function load(ym,fenzu){
		$.post("findUser",{currentPage:ym},function(data){
			//页码
			var ym = "";
			
			var beforNum = data.currentPage-1;
			if(beforNum<=0){
				beforNum=1;
			}
			var ym1 ='<li>'+
		      '<a href="javascript:load('+beforNum+')" aria-label="Previous">'+
		        '<span aria-hidden="true">&laquo;</span>'+
		      '</a>'+
		    '</li>' ;
		    ym+=ym1;
		    
		    //开始位置和结束位置
		    var begin;
		    var end;
		    //显示10个页码
		    if(data.allPages<10){
		    	//总页码小于10页
		    	begin = 1;
		    	end = data.allPages;
		    }else{
		    	//总页码大于10页
		    	begin = data.allPages - 5;
		    	end = data.allPages + 4;
		    	
		    	//2.如果前面不够5个  补齐
		    	if(begin<1){
		    		begin = 1;
		    		end = begin +9;
		    	}
		    	if(end>data.allPages){
		    		end = data.allPages;
		    		begin=end-9
		    	}
		    }
		    
		    for(var i = begin;i<=end;i++){
		    	if (data.currentPage==i){
		    		var ym2 = '<li class="selectPage"><a href="javascript:load('+i+')">'+i+'</a></li>';
		    	}else{
		    		var ym2 = '<li><a href="javascript:load('+i+')">'+i+'</a></li>';
		    	}
		    	
		    	ym+=ym2;
		    }
		    
		   
		    
		    
		    //下一页
		    var lastNum = data.currentPage+1;
			if(lastNum>data.allPages){
				lastNum=data.allPages;
			}
			var ym3 ='<li>'+
			      	 '<a href="javascript:load('+lastNum+')" aria-label="Next">'+
	        		 '<span aria-hidden="true">&raquo;</span>'+
	      			 '</a>'+
	    			 '</li>';
	    			 ym+=ym3;
			$(".pagination").html(ym);
			
			
			//用户列表
			var userList = "";
			for(var i=0;i<data.list.length;i++){
				var user = '<tr>'+
				      '<td>'+data.list[i].name+'</td>'+
				      '<td>'+data.list[i].username+'</td>'+
				      '<td>'+data.list[i].password+'</td>'+
				      '<td>'+data.list[i].idcard+'</td>'+
				      '<td>'+data.list[i].divide+'</td>'+
					  '<td><a href="javascript:udelet('+data.list[i].username+')"><button type="button" class="btn btn-warning btn-xs">删除</button></a></td>'+
				    '</tr> ';
				userList += user;
			}
			$("#userList").html(userList);
		});
	}
</script>
<div>
	<h3>用户管理</h3>
	<!--菜单栏-->
	<div class="col-lg-9">
		<button type="button" class="btn btn-primary user-btn"
			id="adduser_btn">添加用户</button>
		<button type="button" class="btn btn-success user-btn" value="图片组">图片组</button>
		<button type="button" class="btn btn-success user-btn" value="信息组">信息组</button>
	</div>
	<div class="col-lg-3">
		<div class="input-group">
			<input type="text" class="form-control" id="sect_name"
				placeholder="用户名"> <span class="input-group-btn">
				<button class="btn btn-default" type="button" id="sect_btn">查询</button>
			</span>
		</div>
	</div>
</div>

<!--添加用户表单-->
<div class="adduser">
	<h3>请填写用户信息</h3>
	<form id="userFrom">
		<div class="form-group">
			<label for="exampleInputEmail1">用户名</label> <input type="text"
				class="form-control" id="name" name="name" placeholder="用户名">
		</div>
		<div class="form-group">
			<label for="exampleInputEmail1">用户账号</label> <input type="text"
				class="form-control" id="username" name="username"
				placeholder="用户账号">
		</div>
		<div class="form-group">
			<label for="exampleInputEmail1">用户密码</label> <input type="password"
				class="form-control" id="password" name="password"
				placeholder="用户密码">
		</div>
		<div class="form-group">
			<label for="exampleInputPassword1">身份证号</label> <input type="text"
				class="form-control" id="exampleInputPassword1" name="idcard"
				placeholder="身份证号">
		</div>
		<div class="form-group" style="padding-left: 50px;">
			<input type="radio" name="divide" value="图片组"> <label
				for="exampleInputPassword1">图片组</label> <input type="radio"
				name="divide" value="信息组"> <label
				for="exampleInputPassword1">信息组</label>
		</div>
		<button type="submit" class="btn btn-default">提交</button>
	</form>

</div>
<div id="all"></div>

<!--列表栏-->
<table class="table table-striped" style="margin-bottom: 0px;">
	<caption>用户列表</caption>
	<thead>
		<tr>
			<th>用户名</th>
			<th>用户账号</th>
			<th>用户密码</th>
			<th>身份证号</th>
			<th>分组</th>
			<th>删除用户</th>
		</tr>
	</thead>
	<tbody id="userList">

	</tbody>
</table>
<!--分页-->
<div class="fenye" style="margin-bottom: 0px; text-align: center;">
	<nav aria-label="Page navigation">
		<ul class="pagination">

		</ul>
	</nav>
</div>


</div>
